<template>
    <div>
        <div class="index" v-if="this.type==1">
            <div style="font-size:25px;">{{merchantsData.checkState}}</div>
            <div>
               <el-button type="primary" plain @click="cancel">取消</el-button>
                <el-button type="primary" @click="handle">处理</el-button> 
            </div>
        </div>
        <div  class="index-bottom">
             <div>
                <div class="index-top">店铺信息</div>
                <div><span>* 店铺名称:</span><span>{{merchantsData.shopName}}</span></div>
                <div><span>* 店铺负责人:</span><span>{{merchantsData.chargePersonName}}</span></div>
                <div><span>* 负责人电话:</span><span>{{merchantsData.chargePersonPhone}}</span></div>
                <div><span>* 客服电话:</span><span>{{merchantsData.servicePhone}}</span></div>
                <!-- <div><span>* 营业时间:</span><span v-show="merchantsData.businessTime!='undefined-undefined'">{{merchantsData.businessTime}}</span></div> -->
                <div><span>* 起送金额:</span><span>{{merchantsData.upAmount}}</span></div>
                <div><span>* 店铺地址:</span><span>{{merchantsData.enterpriseRegion}}-{{merchantsData.enterpriseAdress}}</span></div>
                <div><span>* 申请时间:</span><span>{{merchantsData.createTime}}</span></div>
                <!-- <div><span>* 平台服务费:</span><span>{{merchantsData.poundage}}</span></div> -->
                <div><span>* 门头照:</span>
                    <span><img :src="merchantsData.doorCard" align="middle" alt=""></span>
                </div>
                <div><span>* 店铺Logo:</span>
                    <span merchantsData.shopLogo>
                        <img :src="merchantsData.shopLogo" align="middle" alt="">
                    </span>
                </div>
                <div><span>* 店内照片:</span>
                    <span v-for="item in merchantsData.shopImg" :key="item.id">
                        <img :src="item" align="middle" alt="">
                    </span>
                </div>
            </div>
            <div>
                <div class="index-top">个人信息</div>
                <!-- <div><span>* 名称:</span><span>{{merchantsData.personalName}}</span></div> -->
                <!-- <div><span>* 证件类型名称:</span><span>{{merchantsData.cardTypeName}}</span></div> -->
                <div><span>* 身份证号码:</span><span>{{merchantsData.idCard}}</span></div>
                <div><span>* 身份证有效期:</span><span>{{merchantsData.cardTime}}</span></div>
                <div><span>* 身份证正面照片:</span>
                    <span><img :src="merchantsData.cardPositive" align="middle" alt=""></span>
                </div>
                <div>
                    <span>* 身份证反面照片:</span>
                    <span><img :src="merchantsData.cardSide" align="middle" alt=""></span>
                </div>
                <div>
                    <span>* 手持证件照:</span>
                     <span><img :src="merchantsData.cardHand" align="middle" alt=""></span>
                </div>
            </div>
            <div>
                <div class="index-top">执照信息</div>
                <div><span>* 统一社会信用代码:</span><span>{{merchantsData.enterpriseCode}}</span></div>
                <div><span>* 营业期限结束时间:</span><span>{{merchantsData.enterpriseEndTime}}</span></div>
                <div>
                    <span>* 营业执照:</span>
                    <span><img :src="merchantsData.enterpriseLicense" align="middle" alt="" style="width:200px;"></span>
                </div>
                <div><span>* 企业名称:</span><span>{{merchantsData.enterpriseName}}</span></div>
                <div><span>* 地址:</span><span>{{merchantsData.enterpriseRegion}}-{{merchantsData.enterpriseAdress}}</span></div>
                <div><span>* 营业期限开始时间:</span><span>{{merchantsData.enterpriseStartTime}}</span></div>
                <div>
                    <span>* 食品经营许可证:</span>
                    <span><img :src="merchantsData.foodCard" align="middle" alt=""></span>
                </div>
            </div>
        </div>
          <div class="mask" v-show="masknum">
            <div class="contenta">
                <p class="content-top">
                    <span>处理申请</span>
                </p>
                <ul class="content-items">
                    <li class="item">
                       <span>入驻处理</span>
                       <div>
                           <template>
                                <el-radio v-model="radio1" label="1">同意入驻</el-radio>
                                <el-radio v-model="radio1" label="2">拒绝入驻</el-radio>
                            </template>
                       </div>
                    </li>
                    <div v-if="radio1==1">
                        <li class="item">
                            <span>生效日期</span>
                            <div>
                                <template>
                                    <el-radio v-model="radio2" label="1" >即时生效</el-radio>
                                    <el-radio v-model="radio2" label="2">指定日期</el-radio>
                                </template>
                            </div>
                        </li>
                        <li class="item" v-if="radio2==2">
                            <span></span>
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </li>
                        <li class="item">
                            <span>平台服务费</span>
                            <el-input v-model="poundage" type='number' placeholder="请输入整数" style="width:220px;"></el-input>%
                        </li>
                        <li class="item">
                            <span>生效时间</span>
                            <el-input v-model="effectiveYear" type='number' placeholder="请输入整数" style="width:220px;"></el-input>年
                        </li>
                    </div>
                     
                    <li class="item" v-if="radio1==2">
                       拒绝原因
                       <div style="margin-left:30px;">
                             <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="reason">
                            </el-input>
                       </div>
                    </li>
                    <li class="item" style="display:none;">
                       原因
                       <div style="margin-left:30px;">
                            <el-input
                                type="textarea"
                                :autosize="{ minRows: 3, maxRows: 6}"
                                placeholder="请输入内容"
                                v-model="textarea">
                            </el-input>
                       </div>
                    </li>
                </ul>
                <div class="content-bottom">
                    <el-button type="primary" @click="adad">确定</el-button>
                    <el-button type="warning"  @click="cancelClick">取消</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            merchantsData:'',//商家数据展示
            merchants:'',
            masknum:false,
            textarea: '',
            radio1: '2',
            radio2: '2',
            value1:'',
            effectiveYear:'',
            reason:'',
            poundage:'',
            type:1,
        }
    },
    mounted(){
        this.type=this.$route.query.type
        this.loadShopList()
    },
    methods:{
        cancel(){
            this.$router.push({path:'/index/occupancyApplication'})
        },
         loadShopList(){
            var param={
               shopId:this.$route.query.shopId
            }
            this.axios({
                url:'/check/getById',
                method:'post',
                data:JSON.stringify(param),
            }).then(res=>{
                res.data.data.shopImg = res.data.data.shopImg.split(",")
                this.merchantsData=res.data.data
                // this.merchantsData.cardHand = URL.createObjectURL(this.merchantsData.cardHand)
                console.log(this.merchantsData.cardHand)
                console.log(this.merchantsData)
                if(this.merchantsData.checkState==0){
                        this.merchantsData.checkState='待审核'
                }else if(this.merchantsData.checkState==1){
                    this.merchantsData.checkState='已通过'
                }else{
                        this.merchantsData.checkState='已拒绝'
                }
            })
        },
        handle(){
            this.masknum=true;
        },
        cancelClick(){
             this.masknum=false;
             this.radio1= '2'
             this.radio2= '2'
        },
        adad(){
            if(this.radio1==1&&!this.effectiveYear){
                this.$message({
                    message: '请输入生效时间',
                    type: 'warning'
                });
            }else if(this.radio1==1&&!this.radio2==2&&!this.value1){
                this.$message({
                    message: '请输入生效日期',
                    type: 'warning'
                });
            }else{
                var param={
                    shopId:this.$route.query.shopId,
                    effectiveDate:this.value1,
                    effectiveYear:this.effectiveYear,
                    reason:this.reason,
                    poundage:this.poundage/100,
                    checkHandle:this.radio1
                }
                this.axios({
                    url:'/check/handle',
                    method:'post',
                    data:JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.masknum=false;
                    this.$router.push('/index/occupancyApplication')
                    
                })
            }
        }
    },
    watch:{
        
    }
}
</script>
<style scoped>
img{
  width: 260px;
}
.index{
    height: 400px;
    display: flex;
    justify-content: space-around;
    align-items:center;
    border-top:1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
}
.index-bottom{
    margin:30px 20px 0 20px ;
    padding:50px 0 0 100px;
    background: #fff;
    box-shadow: -1px -1px 15px #ebeef5;
}
.index-bottom>div>div{
    margin-top: 10px;
}
.index-bottom span:first-child{
    width: 160px;
    display: inline-block;
}
.index-top{

    font-size: 25px;
    margin: 30px 0;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 500px;
  /* height: 350px; */
  background: #fff;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
 
}

.mask .content-top {
  display: flex;
  justify-content:center;
  border-bottom: 1px solid #ddd;
  background-color: #3a68f2;
  color: #fff;
  height: 50px;
  font-size: 18px;
  line-height:50px; 
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 40px;
}

.content-items .item {
  margin: 22px 50px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 100px;
}
.content-bottom{
  margin: 60px 0 20px 190px;

}

</style>